Table Declaration Module

Creating a Table Instance

The first step is to create a table instance that will be used by the component to render the actual table structure. This same table instance can be used add, remove, and modify rows and columns. See the table class documentation for more details.

import Table from 'ember-light-table';

const table = new Table(columns, rows, options);

Here is a more real-word example

// components/my-table.js
import { computed } from '@ember/object';
import Table from 'ember-light-table';

export default Ember.Component.extend({
  model: null,

  columns: computed(function() {
    return [{
      label: 'Avatar',
      valuePath: 'avatar',
      width: '60px',
      sortable: false,
      cellComponent: 'user-avatar'
    }, {
      label: 'First Name',
      valuePath: 'firstName',
      width: '150px'
    }, {
      label: 'Last Name',
      valuePath: 'lastName',
      width: '150px'
    }];
  }),

  table: computed('model', function() {
   return new Table(this.get('columns'), this.get('model'));
  })
});

Implicit Row Creation

To enable synchronization between the table's rows and a model, the enableSync flag must be set to true.

import Table from 'ember-light-table';

const table = new Table(columns, model, { enableSync: true });

The enableSync options creates a two way sync. This means that any manipulation that occurs on the model will also take place on the table's rows collection and vice versa.

To default enableSync to always be true, you can add the following in your config/environment.js

module.exports = function(environment) {
  var ENV = {
   // ...
    'ember-light-table': {
      enableSync: true
    }
  };

  // ...

  return ENV;
};